<template>
	<div class="address">
		<!-- 头部 -->
		<header>
			<i @click="$router.go(-1)" class="iconfont icon-zuo"></i>
			<p>选择城市</p>
		</header>
		<div class="search">
			<div>
				<i class="iconfont icon-sousuo"></i>
				<input v-model="val" type="text" placeholder="请输入搜索关键词">
			</div>
		</div>
		<div class="content" v-show="!val">
			<div class="citysBox">
				<h2 class="title">当前城市:</h2>
				<ul class="cityList">
					<li class="city">{{$store.state.locationCity}}</li>
				</ul>
			</div>
			<div class="citysBox">
				<h2 class="title">热门城市:</h2>
				<ul class="cityList">
					<li class="city" v-for="item in hotCitys" @click="chooseCity(item)" :key="item.id">{{item.n}}</li>
				</ul>
			</div>
			<div class="citysBox" v-for="item in allCitys" :key="item.title">
				<h2 class="title">{{item.title}}</h2>
				<ul class="cityList">
					<li class="city" v-for="val in item.list" @click="chooseCity(val)" :key="val.id">{{val.n}}</li>
				</ul>
			</div>
		</div>
		<div class="match" v-show="val">
			<ul>
				<li v-for="item in matchArr" @click="chooseCity(item)" :key="item.id">{{item.n}}</li>
				<li v-show="matchArr.length == 0">没有你想要的结果!</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				val: '',	//用户搜索的值
				matchArr: [],	//用来装匹配到的城市
				hotCitys: JSON.parse(localStorage.getItem("hotCitys")),
				otherCity: [{
					count: 8,
					id: 5064,
					n: "普洱",
					pinyinFull: "Puer",
					pinuinShort: ""
				},{
					count: 7,
					id: 5061,
					n: "时光市",
					pinyinFull: "Shiguangshi",
					pinuinShort: ""
				}],
				allCitys: JSON.parse(localStorage.getItem("allCitys")),
				allAddressList: JSON.parse(localStorage.getItem("allAddressList")),
				timer: 1
			}
		},
		methods: {
			chooseCity(data){
				this.$store.commit("setCity",data.n);
				this.$router.go(-1);
			},
			UpCase(str){
				str = str.toUpperCase();
				return str;
			}
		},
		watch: {
			"val": function(){
				//搜索城市
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					let arr = [];
					this.allAddressList.forEach(item=>{
						if(this.UpCase(item.pinyinFull).indexOf(this.UpCase(this.val)) != -1 || item.n.indexOf(this.val) != -1){
							arr.push(item);
						}
					})
					this.matchArr = arr;
				},200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.address{
		header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: vw(10) vw(16);
			background: #1c2635;
			i{
				font-size: vw(18);
				color: #eee;
			}
			p{
				width: vw(600);
				text-align: center;
				font-size: vw(18);
				color: #fff;
			}
		}
		.search{
			padding: vw(10) 0;
			text-align: center;
			background: #f6f6f6;
			div{
				width: vw(300);
				height: vw(35);
				border: 1px solid #aaa;
				border-radius: vw(10);
				padding: 0 vw(5);
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				background: #fff;
				i{
					font-size: vw(16);
					color: #aaa;
				}
				input{
					width: vw(280);
					border: none;
					line-height: vw(33);
					font-size: vw(14);
					color: #666;
					padding-left: vw(5);
				}
			}
		}
		.content{
			.citysBox{
				.title{
					font-size: vw(18);
					color: #666;
					background: #ebebeb;
					padding: vw(10) vw(16);
				}
				.cityList{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: vw(10) vw(16);
					.city{
						width: 25%;
						font-size: vw(16);
						color: #333;
						padding: vw(5) 0;
					}
				}
			}
		}
		.match{
			ul{
				padding: 0 vw(16);
				li{
					font-size: vw(16);
					padding: vw(10) 0;
					border-bottom: 1px solid #999;
				}
			}
		}
	}
</style>
